﻿
 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui开发使用文档 - 入门指南</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="../css/global.css" media="all">
</head>
<body>
<div class="layui-header header header-doc">
  <div class="layui-main">
    <a class="logo" href="../layui.html">
      <img src="../imgs/logo.png" alt="layui">
    </a>
    <div class="layui-form component">
      <select lay-search lay-filter="component">
        <option value="">搜索组件或模块</option>
        <option value="layout.html">grid 栅格布局</option>
        <option value="layout.html#admin">admin 后台布局</option>
        <option value="color.html">color 颜色</option>
        <option value="icon.html">iconfont 字体图标</option>
        <option value="anim.html">animation 动画</option>
        <option value="button.html">button 按钮</option>
        <option value="form.html">form 表单组</option>
        <option value="form.html#input">input 输入框</option>
        <option value="form.html#select">select 下拉选择框</option>
        <option value="form.html#checkbox">checkbox 复选框</option>
        <option value="form.html#switch">switch 开关</option>
        <option value="form.html#radio">radio 单选框</option>
        <option value="form.html#textarea">textarea 文本域</option>
        <option value="nav.html">nav 导航菜单</option>
        <option value="nav.html#breadcrumb">breadcrumb 面包屑</option>
        <option value="tab.html">tabs 选项卡</option>
        <option value="progress.html">progress 进度条</option>
        <option value="collapse.html">collapse 折叠面板/手风琴</option>
        <option value="table.html">table 表格元素</option>
        <option value="badge.html">badge 徽章</option>
        <option value="timeline.html">timeline 时间线</option>
        <option value="auxiliar.html#blockquote">blockquote 引用块</option>
        <option value="auxiliar.html#fieldset">fieldset 字段集</option>
        <option value="auxiliar.html#hr">hr 分割线</option>
        
        <option value="layer.html">layer 弹出层/弹窗综合</option>
        <option value="laydate.html">laydate 日期时间选择器</option>
        <option value="layim.html">layim 即时通讯/聊天</option>
        <option value="laypage.html">laypage 分页</option>
        <option value="laytpl.html">laytpl 模板引擎</option>
        <option value="form.html">form 表单模块</option>
        <option value="table.html">table 数据表格</option>
        <option value="upload.html">upload 文件/图片上传</option>
        <option value="element.html">element 常用元素操作</option>
        <option value="carousel.html">carousel 轮播/跑马灯</option>
        <option value="layedit.html">layedit 富文本编辑器</option>
        <option value="tree.html">tree 树形菜单</option>
        <option value="flow.html">flow 信息流/图片懒加载</option>
        <option value="util.html">util 工具集</option>
        <option value="code.html">code 代码修饰</option>
      </select>
    </div>
    <ul class="layui-nav">
      <li class="layui-nav-item layui-this">
        <a href="doc.html">文档<!--  --></a> 
      </li>
      <li class="layui-nav-item ">
        <a href="../demo/demo.html">示例<!-- <span class="layui-badge-dot"></span> --></a>
      </li> 
      
      <li class="layui-nav-item layui-hide-xs">
        <a href="http://fly.layui.com/" target="_blank">社区</a>
      </li>
      
      
      <li class="layui-nav-item">
        <!--<span class="layui-badge-dot" style="margin: -4px 3px 0;"></span>-->
        <a href="javascript:;">周边</a>
        <dl class="layui-nav-child">
          <dd class="layui-hide-sm layui-show-xs"><a href="http://fly.layui.com/" target="_blank">社区交流</a><hr></dd>
          <dd><a href="http://layim.layui.com/" target="_blank">即时聊天</a></dd>
          <dd><a href="http://www.layui.com/template/fly/" target="_blank">社区模板<span class="layui-badge-dot"></span></a></dd>
          <hr>
          <dd><a href="http://www.layui.com/alone.html" target="_blank">独立组件</a></dd>
          <dd><a href="http://fly.layui.com/jie/9842/" target="_blank">Axure组件</a></dd>
        </dl>
      </li>
      
      
      <li class="layui-nav-item layui-hide-xs">
        <a href="http://www.layui.com/admin/" target="_blank">后台方案<span class="layui-badge-dot"></span></a>
      </li>
      
    </ul>
  </div>
</div>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="../js/html5.min.js"></script>
  <script src="../js/respond.min.js"></script>
<![endif]--> 
<ul class="site-dir">
  <li><a href="#start"><cite>开始使用</cite></a></li>
  <li><a href="#config"><cite>初始化配置</cite></a></li>
  <li><a href="#init"><cite>init数据格式</cite></a></li>
  <li><a href="#members"><cite>获取群员</cite></a></li>
  <li><a href="#uploadImage"><cite>上传图片/文件</cite></a></li>
  <li><a href="#tool"><cite>扩展工具栏</cite></a></li>
  <li><a href="#msgbox"><cite>消息盒子</cite></a></li>
  <li><a href="#find"><cite>查找页面</cite></a></li>
  <li><a href="#log"><cite>更多聊天记录</cite></a></li>
  <li><a href="#text"><cite>富文本内容格式</cite></a></li>
  <li><a href="#WebSocket"><cite>接入WebSocket</cite></a></li>
  <li><a href="#on"><cite>ready事件</cite></a></li>
  <li><a href="#ononline"><cite>监听在线状态切换</cite></a></li>
  <li><a href="#onsign"><cite>监听修改签名</cite></a></li>
  <li><a href="#onsetSkin"><cite>监听更换背景皮肤</cite></a></li>
  <li><a href="#onsendMessage"><cite>监听发送的消息</cite></a></li>
  <li><a href="#ongetMessage"><cite>监听接受的消息</cite></a></li>
  <li><a href="#onmembers"><cite>监听查看群员</cite></a></li>
  <li><a href="#onchatChange"><cite>监听聊天窗口切换</cite></a></li>
  <li><a href="#chat"><cite>自定义聊天窗口</cite></a></li>
  <li><a href="#setChatStatus"><cite>更新当前会话状态</cite></a></li>
  <li><a href="#add"><cite>弹出添加面板</cite></a></li>
  <li><a href="#setFriendGroup"><cite>好友分组面板</cite></a></li>
  <li><a href="#addList"><cite>添加好友/群到主面板</cite></a></li>
  <li><a href="#removeList"><cite>移除主面板的好友/群</cite></a></li>
  <li><a href="#setFriendStatus"><cite>好友置灰和取消</cite></a></li>
  <li><a href="#cache"><cite>获取cache数据</cite></a></li>
  <li><a href="#dellocal"><cite>删除本地数据</cite></a></li>
  <li><a href="#copyright"><cite>关于版权</cite></a></li>
</ul>
<div class="layui-main site-inline">
  <div class="site-tree">
  <ul class="layui-tree">
  
    <li><h2>基础说明</h2></li>
  
    <li class="site-tree-noicon ">
      <a href="doc.html">
        <cite>开始使用</cite>
        <em>Getting Started</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="infrastructure.html">
        <cite>底层方法</cite>
        <em>基础支撑</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="element.html">
        <cite>页面元素</cite>
        <em>规范 / 公共类 / 属性</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="modules.html">
        <cite>模块规范</cite>
        <em>使用 / 扩展</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="faq.html">
        <cite>常见问题</cite>
        <em>FAQ</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="changelog.html">
        <cite>更新日志</cite>
        
        <span class="layui-badge-dot" style="position: relative; top: -3px; left: -3px;"></span>
        
      </a>
    </li>
    
    <li><h2>页面元素</h2></li>
    
    
    <li class="site-tree-noicon ">
      <a href="layout.html">
        <cite>布局</cite>
        <em>栅格 / 后台布局</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="color.html">
        <cite>颜色</cite>
        <em>主题色设计感 / 内置背景色</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="icon.html">
        <cite>图标</cite>
        <em>字体图标</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="anim.html">
        <cite>动画</cite>
        <em>内置的CSS3动画类</em>
      </a>
    </li>
    
    <li class="site-tree-noicon ">
      <a href="button.html">
        <cite>按钮</cite>
        <em>button组</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="form.html">
        <cite>表单</cite>
        <em>form元素集合</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="nav.html">
        <cite>导航</cite>
        <em>菜单 / 面包屑</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="tab.html">
        <cite>选项卡</cite>
        <em>Tabs 切换</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="progress.html">
        <cite>进度条</cite>
        <em>progress</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="panel.html">
        <cite>面板</cite>
        <em>折叠 / 手风琴</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="table.html">
        <cite>表格</cite>
        <em>静态table</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="badge.html">
        <cite>徽章</cite>
        <em>小圆点 / 小边框</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="timeline.html">
        <cite>时间线</cite>
        <em>timeline</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="auxiliar.html">
        <cite>辅助</cite>
        <em>引用 / 字段集 / 横线等</em>
      </a>
    </li>
   
    
    <li><h2>内置模块</h2></li>
    
    <li class="">
      <a href="layer.html">
        <i class="layui-icon" style="top: 3px;">&#xe638;</i><cite>弹出层</cite>
        <em>layer</em>
      </a>
    </li>
    <li class="">
      <a href="laydate.html">
        <i class="layui-icon" style="top: 1px;">&#xe637;</i><cite>日期与时间选择</cite>
        <em>laydate</em>
      </a>
    </li>
    <li class="layui-this">
      <a href="layim.html">
        <i class="layui-icon" style="position: relative; top: 3px;">&#xe63a;</i>
        <cite>即时通讯</cite>
        <em>layim</em>
      </a>
    </li>
    <li class="">
      <a href="laypage.html">
        <i class="layui-icon">&#xe633;</i><cite>分页</cite>
        <em>laypage</em>
      </a>
    </li>
    <li class="">
      <a href="laytpl.html">
        <i class="layui-icon">&#xe628;</i><cite>模板引擎</cite>
        <em>laytpl</em>
      </a>
    </li>
    <li class="">
      <a href="dataTable.html">
        <i class="layui-icon">&#xe62d;</i>
        <cite>数据表格</cite>
        <em>table</em>
      </a>
    </li>
    <li class="">
      <a href="DataForm.html">
        <i class="layui-icon" style="top: 2px;">&#xe63c;</i>
        <cite>表单</cite>
        <em>form</em>
      </a>
    </li>
    <li class="">
      <a href="upload.html">
        <i class="layui-icon">&#xe62f;</i>
        <cite>文件上传</cite>
        <em>upload</em>
      </a>
    </li>
    <li class="">
      <a href="DataElement.html">
        <i class="layui-icon" style="top: 1px; font-size: 18px;">&#xe62a;</i>
        <cite>常用元素操作</cite>
        <em>element</em>
      </a>
    </li>
    <li class="">
      <a href="carousel.html">
        <i class="layui-icon">&#xe634;</i>
        <cite>轮播</cite>
        <em>carousel</em>
      </a>
    </li>
    
    <li class="">
      <a href="flow.html">
        <i class="layui-icon">&#xe636;</i>
        <cite>流加载</cite>
        <em>flow</em>
      </a>
    </li>
    <li class="">
      <a href="util.html">
        <i class="layui-icon">&#xe631;</i>
        <cite>工具集</cite>
        <em>util</em>
      </a>
    </li>
    <li class="">
      <a href="code.html">
        <i class="layui-icon" style="top: 1px;">&#xe635;</i>
        <cite>代码修饰器</cite>
        <em>code</em>
      </a>
    </li>
    <li class="">
      <a href="layedit.html">
        <i class="layui-icon" style="top: 1px;">&#xe639;</i>
        <cite><span style="font-size:1px;">1.0.9:</span>富文本编辑器</cite>
        <em>layedit</em>
      </a>
    </li>
    <li class="">
      <a href="tree.html">
        <i class="layui-icon" style="top: 1px;">&#xe62e;</i>
        <cite><span style="font-size:1px;">1.0.9:</span>树形菜单</cite>
        <em>tree</em>
      </a>
    </li>
  </ul>
</div>

  <div class="site-content">
    <h1 class="site-h1"><i class="layui-icon">&#xe63a;</i>LayIM 开发者文档</h1>
    
    <blockquote class="layui-elem-quote">
      当前文档适用于 <em>LayIM PC端</em> 最新版，如果你正在了解的并非该版本，你可以前往其它版本阅览：
      <a href="layim_mobile.html" class="layui-btn">LayIM 移动版文档</a>
    </blockquote>
    
   <blockquote class="site-text layui-elem-quote">
      在WebIM似乎已被打入冷宫的今天，LayIM正试图重新为网页带来一些社交想象。作为一款Web即时通讯前端解决方案（服务端需自写），LayIM提供了全方位的前端接口支撑，不仅能让您更高效地接入到自己的通讯服务中，更能让你轻松地与 <em>环信</em>、<em>融云</em>、<em>野狗</em> 等第三方通讯服务平台对接。LayIM始终坚持极简的体验，致力于拉近你的用户在web间的距离。
      <br><br>
      LayIM<em>兼容除IE6/7以外的所有浏览器</em>，如果你的网站仍需兼容ie6/7，那么强烈建议你说服你的老板或者客户。
    </blockquote>
    
    <blockquote class="site-text layui-elem-quote">
      模块加载名称：<a>layim</a>，官网地址：<a href="http://layim.layui.com/" target="_blank">layim.layui.com</a>
    </blockquote>
    
    <div class="site-title">
      <a name="start"></a>
      <fieldset><legend>开始使用</legend></fieldset>
    </div>
    <div class="site-text">
      <p>LayIM基于layui模块体系，因此你获得的其实是一个包含LayIM的layui框架，不同的是，开源版的layui并不包含LayIM。捐赠后，将您获得的压缩包解压，将layui整个目录文件放入你的项目后，不用再对其代码做任何修改（方便下次升级）。然后您只需引入下述两个文件即可。</p>
      <pre class="layui-code">
./build/css/layui.css
./build/layui.js</pre>
      <p><br>假如你将layui放入你的/static/目录中，并且你的html页面在根目录，那么一个最直接的例子是：</p>
      <pre class="layui-code">
&lt;!doctype html>
&lt;html>
&lt;head>
&lt;meta charset="utf-8">
&lt;title>LayIM测试&lt;/title>
&lt;link rel="stylesheet" href="/static/build/layui.css" media="all">
&lt;/head>
&lt;body>
&lt;script src="/static/build/layui.js">&lt;/script>
&lt;script>
layui.use('layim', function(layim){
  //先来个客服模式压压精
  layim.config({
    brief: true //是否简约模式（如果true则不显示主面板）
  }).chat({
    name: '客服姐姐'
    ,type: 'friend'
    ,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1'
    ,id: -2
  });
});
&lt;/script>
&lt;/body>
&lt;/html>
      </pre>
      <p>通过上述方式，便可成功加载layim。当然，你仅仅只是看到了一个"客服姐姐"的聊天面板，这等同于：Hello World!
        <br>向“客服姐姐”问好后就忘了它吧，这份文档才刚刚开始。<img src="//res.layui.com/layui/src/images/face/2.gif">
      </p>
    </div>
    
    <div class="site-title">
      <a name="config"></a>
      <fieldset><legend>初始化配置</legend></fieldset>
    </div>
    <div class="site-text">
      <p>一个你必须认识的方法：<a>layim.config(options)</a><br>控制着许多重要的配置，基本上一个完整LayIM实例的构成由它而开始，它允许你自由设定以下参数：</p>
      <pre class="layui-code">
layui.use('layim', function(layim){
  //基础配置
  layim.config({
 
    init: {} //获取主面板列表信息，下文会做进一步介绍
 
    //获取群员接口（返回的数据格式见下文）
    ,members: {
      url: '' //接口地址（返回的数据格式见下文）
      ,type: 'get' //默认get，一般可不填
      ,data: {} //额外参数
    }
    
    //上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
    ,uploadImage: {
      url: '' //接口地址
      ,type: 'post' //默认post
    } 
    
    //上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
    ,uploadFile: {
      url: '' //接口地址
      ,type: 'post' //默认post
    }
    //扩展工具栏，下文会做进一步介绍（如果无需扩展，剔除该项即可）
    ,tool: [{
      alias: 'code' //工具别名
      ,title: '代码' //工具名称
      ,icon: '&amp;#xe64e;' //工具图标，参考图标文档
    }]
    
    ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
    ,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
    ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可
  });
});      
      </pre>
      <p>layim.config(options)的更多可选配置项见下表：</p>
      <table class="layui-table">
        <colgroup>
          <col width="100">
          <col width="100">
          <col width="100">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>可选项</th>
            <th>默认值</th>
            <th>类型</th>
            <th>用途</th>
          </tr> 
        </thead>
        <tbody>
          <tr>
            <td>brief</td>
            <td>false</td>
            <td>boolean</td>
            <td>是否简约模式，如果设为 true，则主面板不会显示。一般可用于客服</td>
          </tr>
          <tr>
            <td>title</td>
            <td>我的LayIM</td>
            <td>string</td>
            <td>主面板最小化后显示的名称</td>
          </tr>
          <tr>
            <td>min</td>
            <td>false</td>
            <td>boolean</td>
            <td>用于设定主面板是否在页面打开时，始终最小化展现</td>
          </tr>
          <tr>
            <td>right</td>
            <td>0px</td>
            <td>string</td>
            <td>用于设定主面板右偏移量。该参数可避免遮盖你页面右下角已经的bar</td>
          </tr>
          <tr>
            <td>minRight</td>
            <td>无</td>
            <td>string</td>
            <td>用户控制聊天面板最小化时、及新消息提示层的相对right的px坐标。<br>如：minRight: '200px'</td>
          </tr>
          <tr>
            <td>initSkin</td>
            <td>空字符</td>
            <td>string</td>
            <td>设置初始背景，默认不开启。可设置./css/modules/layim/skin目录下的图片文件名
            <br>如：initSkin: '5.jpg'</td>
          </tr>
          <tr>
            <td>isAudio</td>
            <td>false</td>
            <td>boolean</td>
            <td>是否开启聊天工具栏音频</td>
          </tr>
          <tr>
            <td>isVideo</td>
            <td>false</td>
            <td>boolean</td>
            <td>是否开启开启聊天工具栏视频</td>
          </tr>
          <tr>
            <td>notice</td>
            <td>false</td>
            <td>boolean</td>
            <td>是否开启桌面消息提醒，即在浏览器之外的提醒</td>
          </tr>
          <tr>
            <td>voice</td>
            <td>default.mp3</td>
            <td>string/boolean</td>
            <td>设定消息提醒的声音文件（所在目录：./layui/css/modules/layim/voice/）<br>若不开启，设置 false 即可</td>
          </tr>
          <tr>
            <td>isfriend</td>
            <td>true</td>
            <td>boolean</td>
            <td>是否开启好友</td>
          </tr>
          <tr>
            <td>isgroup</td>
            <td>true</td>
            <td>boolean</td>
            <td>是否开启群组</td>
          </tr>
          <tr>
            <td>maxLength</td>
            <td>3000</td>
            <td>number</td>
            <td>可允许的消息最大字符长度</td>
          </tr>
          <tr>
            <td>skin</td>
            <td>null</td>
            <td>object</td>
            <td>拓展背景，如：
            <pre>
skin: [ 
  'http://xxx.com/skin.jpg', 
  'b.png'
  …
]             
            </pre>
            </td>
          </tr>
          <tr>
            <td>copyright</td>
            <td>false</td>
            <td>boolean</td>
            <td>是否授权。如果非授权获得，或将LayIM应用在第三方，建议保留，即不设置。</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="site-title">
      <a name="init"></a>
      <fieldset><legend>init数据格式</legend></fieldset>
    </div>
    <div class="site-text">
      <p>通过layim.config来设定init参数可获得：我的信息、好友列表、群组列表。你可以采用Ajax配置方式，以及直接赋值列表数据。</p>
      <pre class="layui-code" lay-title="Ajax配置方式">
/获取主面板列表信息
init: {
  url: '' //接口地址（返回的数据格式见下文）
  ,type: 'get' //默认get，一般可不填
  ,data: {} //额外参数
}  
      </pre>
      <p>那么该接口所返回的信息（response）应该严格按照下述的JSON格式：</p>
      <pre class="layui-code" lay-skin="notepad">
{
  "code": 0 //0表示成功，其它表示失败
  ,"msg": "" //失败信息
  ,"data": {
  
    //我的信息
    "mine": {
      "username": "纸飞机" //我的昵称
      ,"id": "100000" //我的ID
      ,"status": "online" //在线状态 online：在线、hide：隐身
      ,"sign": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
      ,"avatar": "a.jpg" //我的头像
    }
    
    //好友列表
    ,"friend": [{
      "groupname": "前端码屌" //好友分组名
      ,"id": 1 //分组ID
      ,"list": [{ //分组下的好友列表
        "username": "贤心" //好友昵称
        ,"id": "100001" //好友ID
        ,"avatar": "a.jpg" //好友头像
        ,"sign": "这些都是测试数据，实际使用请严格按照该格式返回" //好友签名
        ,"status": "online" //若值为offline代表离线，online或者不填为在线
      }, …… ]
    }, …… ]
    
    //群组列表
    ,"group": [{
      "groupname": "前端群" //群组名
      ,"id": "101" //群组ID
      ,"avatar": "a.jpg" //群组头像
    }, …… ]
  }
}
      </pre>
      <p>Demo：<a href="http://layim.layui.com/json/getList.json" target="_blank">getList.json</a></p>
      <pre class="layui-code" lay-title="直接赋值列表数据">
//里面的字段格式 同 上文的 data 中的格式。
//注意：采用该方式时，不可以再配置url参数，否则会走Ajax模式
init: {
  mine: {}
  ,friend: []
  ,group: []
}
      </pre>
    </div>
    
    <div class="site-title">
      <a name="members"></a>
      <fieldset><legend>members数据格式</legend></fieldset>
    </div>
    <div class="site-text">
      <p>通过layim.config来设定members参数可获取群员列表，假设你进行了下述配置</p>
      <pre class="layui-code">
,members: {
  url: ' '/api/im/getMembers/'
  ,data: {}
}     
      </pre>
      </p>那么当点击群聊面板查看成员时，将会向members的url发送Ajax请求，并自动传递一个id参数（群组id）。该接口所返回的信息（response）应该严格按照下述的JSON格式：</p>
      <pre class="layui-code"  lay-skin="notepad">
{
  "code": 0 //0表示成功，其它表示失败
  ,"msg": "" //失败信息
  ,"data": {
    "list": [{
      "username": "马小云" //群员昵称
      ,"id": "168168" //群员id
      ,"avatar": "http://tp4.sinaimg.cn/2145291155/180/5601307179/1" //群员头像
      ,"sign": "让天下没有难写的代码" //群员签名
    }, …… ]
  }
}      
      </pre>
      <p>Demo：<a href="http://layim.layui.com/json/getMembers.json" target="_blank">getMembers.json</a></p>
    </div>
    
    <div class="site-title">
      <a name="uploadImage"></a>
      <fieldset><legend>上传图片</legend></fieldset>
    </div>
    <div class="site-text">
      <p>通过layim.config来设定uploadImage参数可进行图片上传，假设你进行了下述配置</p>
      <pre class="layui-code">
,uploadImage: {
  url: ''
}     
      </pre>
      </p>那么当点击聊天面板上传图片时，将会向uploadImage的url发送HTTP请求，进行图片上传。我们会给你传递一个name="file"的文件表单域，你接受即可。该接口所返回的信息（response）应该严格按照下述的JSON格式：</p>
      <pre class="layui-code" lay-skin="notepad">
{
  "code": 0 //0表示成功，其它表示失败
  ,"msg": "" //失败信息
  ,"data": {
    "src": "http://cdn.xxx.com/upload/images/a.jpg" //图片url
  }
}      
      </pre>
    </div>
    
    <div class="site-title">
      <a name="uploadFile"></a>
      <fieldset><legend>上传文件</legend></fieldset>
    </div>
    <div class="site-text">
      <p>通过layim.config来设定uploadImage参数可进行文件上传，事实上跟图片上传非常类似有木有？假设你进行了下述配置</p>
      <pre class="layui-code">
,uploadFile: {
  url: ' ''
}     
      </pre>
      </p>那么当点击聊天面板上传文件时，将会向uploadFile的url发送HTTP请求，进行文件上传。我们会给你传递一个name="file"的文件表单域，你接受即可。该接口所返回的信息（response）应该严格按照下述的JSON格式：</p>
      <pre class="layui-code" lay-skin="notepad">
{
  "code": 0 //0表示成功，其它表示失败
  ,"msg": "" //失败信息
  ,"data": {
    "src": "http://cdn.xxx.com/upload/file/LayIM.zip" //文件url
    ,"name": "LayIM.zip" //文件名
  }
}      
      </pre>
    </div>
    
    <div class="site-title">
      <a name="tool"> </a>
      <fieldset><legend>扩展工具栏</legend></fieldset>
    </div>
    <div class="site-text">
      <p>你可以对聊天面板的工具栏区域进行扩展，以便实现更丰富的聊天内容。首先在你layim.config中设定好要扩展的图标、名称等信息，如：</p>
      <pre class="layui-code">
layim.config({
  //可同时配置多个
  tool: [{
    alias: 'code' //工具别名
    ,title: '代码' //工具名称
    ,icon: '&amp;#xe64e;' //工具图标，参考图标文档
  }] 
})
      </pre>
      </p>那么在工具栏中将会出现一个代码的图标，如何在点击它时实现你想要的功能呢？很简单，你只需要：</p>
      <pre class="layui-code">
//监听自定义工具栏点击，以添加代码为例
layim.on('tool(code)', function(insert, send, obj){ //事件中的tool为固定字符，而code则为过滤器，对应的是工具别名（alias）
  layer.prompt({
    title: '插入代码'
    ,formType: 2
    ,shade: 0
  }, function(text, index){
    layer.close(index);
    insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器，主要由insert完成
    //send(); //自动发送
  });
  console.log(this); //获取当前工具的DOM对象
  console.log(obj); //获得当前会话窗口的DOM对象、基础信息
});   
      </pre>
    </div>
    
    <div class="site-title">
      <a name="msgbox"></a>
      <fieldset><legend>消息盒子</legend></fieldset>
    </div>
    <div class="site-text">
      <p>你可以配置msgbox指向一个盒子页面地址，从而为主面板赋予各种系统消息机制。</p>
      <pre class="layui-code">
layim.config({
  msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
});      
      </pre>
      <p>它指向的是我们内置的一个盒子模版（你也可以换成你自己的页面），里面写好了所有代码，你只需要按照里面的注释配置好一些接口即可。
      <br>当你试图在盒子的图标上实时获取到最新的系统消息数时，你可以借助以下方法完成。</p>
      <pre class="layui-code">
layim.msgbox(5); //数字即为你通过websocket或者Ajax实时获取到的最新消息数量
//它将在主面板的消息盒子icon上不断显隐提示，直到点击后自动消失
      </pre>
    </div>
    
    <div class="site-title">
      <a name="find"></a>
      <fieldset><legend>查找页面</legend></fieldset>
    </div>
    <div class="site-text">
      <p>为了避免联调的复杂性且需求不一，所以官方暂不提供该模版结构与样式，实际使用时，可移至该文件到你的项目中，对页面自行把控</p>
      <pre class="layui-code">
layim.config({
  find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
});      
      </pre>
      
    </div>
    
    <div class="site-title">
      <a name="log"></a>
      <fieldset><legend>查看更多聊天记录</legend></fieldset>
    </div>
    <div class="site-text">
      <p>LayIM会在本地存储每个会话的最新 20 条记录。但一般服务端也要存储存储一份，为了避免联调的复杂性，我们并不内置更多聊天记录的展示。而是弹出一个聊天记录的layer窗口，这意味着你可以随意发挥聊天记录的页面。通过layim.config配置<a>chatLog</a>来指向聊天记录的URL。假设你进行了下述设定：</p>
      <pre class="layui-code">
layim.config({
  //以下为我们内置的模版，也可以换成你的任意页面。若不开启，剔除该项即可
  chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' 
});      
      </pre>
      <p>那么，我们会在chatLog所对应的URL后面动态追加当前聊天窗口的ID（即好友或群组ID）和类型，如：/chat/log?id=123&type=friend
      <br>详细情况可以打开 <em>chatlog.html</em> 去了解，里面有我们写好的代码。
      </p>
    </div>
    
    <div class="site-title">
      <a name="text"></a>
      <fieldset><legend>富文本内容格式</legend></fieldset>
    </div>
    <div class="site-text">
      <p>LayIM的聊天多类型内容解析采用内部特定的文本格式，你可以借助它在聊天内容区域呈现多样化的内容。目前我们支持的内容如下：</p>
      <pre class="layui-code">
超链接格式：<em>a(地址)[文本]</em>       如：a(http://www.layui.com)[layui]   
图片格式：<em>img[地址]</em>            如：img[http://cdn.layui.com/xxx/a.jpg]
文件格式：<em>file(地址)[文本]</em>      如：file(http://cdn.layui.com/download/layim.zip)[layim.zip]
音频格式：<em>audio[地址]</em>          如：audio[http://cdn.layui.com/xxx/a.mp3]
视频格式：<em>video[地址]</em>          如：video[http://cdn.layui.com/xxx/a.avi]
      </pre>
    </div>
    
    <div class="site-title">
      <a name="WebSocket"> </a>
      <fieldset><legend>接入WebSocket</legend></fieldset>
    </div>
    <div class="site-text">
      <p>一般来说，对接到第三方通讯平台是个更靠谱的选择，比如：<em>环信</em>、<em>融云</em>、<em>野狗</em>。它们都可以是 LayIM 的最佳拍档，你会省去许多工作。</p>
      <p>但如果你想保证绝对的数据隐私，你也可以自己搭建通讯服务。目前所有的主流Web语言都有对WebSocket做很好的支持，其中也有很多优秀的通讯框架可以任你挑选，因此万万不可畏惧它的存在，除非你真的想用Ajax轮询去解决消息I/O。WebSocket会使得你的消息接受和传递变得极其轻松，最重要的一点是，性能卓绝。WebSocket的建立非常简单：</p>
      <pre class="layui-code" lay-skin="notepad">
layui.use('layim', function(layim){
  
  //建立WebSocket通讯
  //注意：如果你要兼容ie8+，建议你采用 <a href="http://socket.io/download/" target="_blank" res="nofollow">socket.io</a> 的版本。下面是以原生WS为例
  
  var socket = new WebSocket('ws://localhost:8090');
  
  //发送一个消息
  socket.send('Hi Server, I am LayIM!');
<pre class="layui-code" lay-skin="notepad">
//更多情况下，一般是传递一个JSON
socket.send(JSON.stringify({
  type: '' //随便定义，用于在服务端区分消息类型
  ,data: {}
})); 
</pre>
  //连接成功时触发
  socket.onopen = function(){
    socket.send('XXX连接成功'); 
  };
  
  //监听收到的消息
  socket.onmessage = function(res){
    //res为接受到的值，如 {"emit": "messageName", "data": {}}
    //emit即为发出的事件名，用于区分不同的消息
  };
  
  另外还有onclose、onerror，分别是在链接关闭和出错时触发。
  
  //基本上常用的就上面几个了，是不是非一般的简单？<img src="//res.layui.com/layui/src/images/face/20.gif">
  
  
});
      </pre>
      <p>服务端层面，不用害怕，事情也远没有那么复杂。这些文档也许可以帮助到你：<a href="http://fly.layui.com/jie/3244.html" target="_blank">LayIM 接入案例/教程大集锦，含Node.js/Java/.NET/PHP</a></p>
    </div>
    
    <div class="site-title">
      <a name="on"></a>
      <fieldset><legend>事件监听</legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法：<a>layim.on(event, callback)</a><br>用于LayIM事件监听。接受两个参数。第一个参数event即事件名，第二个参数callback即事件回调。</p>
    </div>
    
    <div class="site-title">
      <a name="onready"></a>
      <fieldset><legend>ready事件</legend></fieldset>
    </div>
    <div class="site-text">
      <p>事件名：<a>ready</a>，用于监听LayIM初始化就绪。由于主面板的渲染，需建立在init接口请求完毕的基础上，而一些操作必须等到主面板渲染完毕后才能操作，所以这个时候就可以放入ready事件的回调体中来执行。其回调接受一个object类型的参数，携带一些基础配置信息、我的用户信息、好友/群列表信息、本地数据库信息等，调用方式：</p>
      <pre class="layui-code">
layim.on('ready', function(options){
  console.log(options);
  //do something
});
//注意：以下情况不会触发 ready事件，即代码无需写在ready里面
* 简约模式（即brief: true时）不会触发该事件
* init直接赋值mine、friend的情况下（只有设置了url才会执行 ready 事件）
      </pre>
    </div>
    
    <div class="site-title">
      <a name="ononline"></a>
      <fieldset><legend>监听在线状态切换</legend></fieldset>
    </div>
    <div class="site-text">
      <p>事件名：<a>online</a>，看到主面板你的昵称后的icon么，没错，就是它。当前支持“在线”、“隐身”两种状态切换。分别以online和hide的string类型的值传递给回调参数。如：</p>
      <pre class="layui-code">
layim.on('online', function(status){
  console.log(status); //获得online或者hide
  
  //此时，你就可以通过Ajax将这个状态值记录到数据库中了。
  //服务端接口需自写。
});     
      </pre>
    </div>
    
    <div class="site-title">
      <a name="onsign"></a>
      <fieldset><legend>监听修改签名</legend></fieldset>
    </div>
    <div class="site-text">
      <p>事件名：<a>sign</a>
      <br>当主面板的签名被改动后触发，并返回新的签名</p>
      <pre class="layui-code">
layim.on('sign', function(value){
  console.log(value); //获得新的签名
  
  //此时，你就可以通过Ajax将新的签名同步到数据库中了。
});     
      </pre>
    </div>
    
    <div class="site-title">
      <a name="onsetSkin"></a>
      <fieldset><legend>监听更换背景皮肤</legend></fieldset>
    </div>
    <div class="site-text">
      <p>事件名：<a>setSkin</a>
      <br>当点击更换背景皮肤时触发，返回特定目录下的图片文件名和src路径</p>
      <pre class="layui-code">
layim.on('setSkin', function(filename, src){
  console.log(filename); //获得文件名，如：1.jpg
  console.log(src); //获得背景路径，如：http://res.layui.com/layui/src/css/modules/layim/skin/1.jpg
});     
      </pre>
    </div>
    
    <div class="site-title">
      <a name="onsendMessage"></a>
      <fieldset><legend>监听发送的消息</legend></fieldset>
    </div>
    <div class="site-text">
      <p>事件名：<a>sendMessage</a>，每当你发送一个消息，都可以通过该事件监听到。回调参数接受一个object类型的值，携带发送的聊天信息。如：</p>
      <pre class="layui-code">
layim.on('sendMessage', function(res){
  var mine = res.mine; //包含我发送的消息及我的信息
<pre class="layui-code">//mine的结构如下：
{
  avatar: "avatar.jpg" //我的头像
  ,content: "你好吗" //消息内容
  ,id: "100000" //我的id
  ,mine: true //是否我发送的消息
  ,username: "纸飞机" //我的昵称
}</pre>
  var to = res.to; //对方的信息
<pre class="layui-code">//to的结构如下：
{
  avatar: "avatar.jpg"
  ,id: "100001"
  ,name: "贤心"
  ,sign: "这些都是测试数据，实际使用请严格按照该格式返回"
  ,type: "friend" //聊天类型，一般分friend和group两种，group即群聊
  ,username: "贤心"
}</pre>
  //监听到上述消息后，就可以轻松地发送socket了，如：
  socket.send(JSON.stringify({
    type: 'chatMessage' //随便定义，用于在服务端区分消息类型
    ,data: res
  })); 
  
});
      </pre>
    </div>
    
    <div class="site-title">
      <a name="ongetMessage"></a>
      <fieldset><legend>监听接受的消息</legend></fieldset>
    </div>
    <div class="site-text">
      <p>事件的监听并非layim提供，而是WebSocket提供。<br>检测到WebSocket事件后，执行layim的内置方法：<a>layim.getMessage(options)</a> <br>即可显示消息到聊天面板（如果消息所指定的聊天面板没有打开，则会进入本地的消息队列中，直到指定的聊天面板被打开，方可显示。），这是一个对你有用的例子：</p>
      <pre class="layui-code">
//监听收到的聊天消息，假设你服务端emit的事件名为：chatMessage
socket.onmessage = function(res){
  res = JSON.parse(res);
  if(res.emit === 'chatMessage'){
    layim.getMessage(res.data); //res.data即你发送消息传递的数据（阅读：<a href="#onsendMessage">监听发送的消息</a>）
  }
};
 
//如果是来自于用户的聊天消息，它必须接受以下字段
<pre class="layui-code">
layim.getMessage({
  username: "纸飞机" //消息来源用户名
  ,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //消息来源用户头像
  ,id: "100000" //消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
  ,type: "friend" //聊天窗口来源类型，从发送消息传递的to里面获取
  ,content: "嗨，你好！本消息系离线消息。" //消息内容
  ,cid: 0 //消息id，可不传。除非你要对消息进行一些操作（如撤回）
  ,mine: false //是否我发送的消息，如果为true，则会显示在右方
  ,fromid: "100000" //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
  ,timestamp: 1467475443306 //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
});
</pre>
 
//如果是来自于系统的聊天面板的消息
<pre class="layui-code">
layim.getMessage({
  system: true //系统消息
  ,id: 1111111 //聊天窗口ID
  ,type: "friend" //聊天窗口类型
  ,content: '对方已掉线'
});
</pre>
    </pre>
    </div>
    
    <div class="site-title">
      <a name="onmembers"></a>
      <fieldset><legend>监听查看群员</legend></fieldset>
    </div>
    <div class="site-text">
      <p>事件名：<a>members</a>，在群聊面板中查看全部成员时触发，该事件返回获取群员接口（即layim.config中的members）的response信息。</p>
      <pre class="layui-code">
layim.on('members', function(data){
  console.log(data);
});
      </pre>
    </div>
    
    <div class="site-title">
      <a name="onchatChange"></a>
      <fieldset><legend>监听聊天窗口的切换</legend></fieldset>
    </div>
    <div class="site-text">
      <p>事件名：<a>chatChange</a>，坦白而言，似乎没什么卵用。不过有总比没有好。该事件返回一个object类型的参数，携带当前聊天面板的容器、基础信息等。</p>
      <pre class="layui-code">
layim.on('chatChange', function(obj){
  console.log(obj);
});
      </pre>
    </div>
    
    <div class="site-title">
      <a name="chat"></a>
      <fieldset><legend>自定义一个聊天窗口</legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法名：<a>layim.chat(options)</a>，是否似曾相识，没错，我们见过文档最开始的“客服姐姐”用的就是该方法。它允许你自定义任意模式的聊天窗口，先看例子吧：</p>
      <p></p>
      <pre class="layui-code">
//自定义聊天窗口
<pre class="layui-code">
layim.chat({
  name: '张三' //名称
  ,type: 'friend' //聊天类型
  ,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1' //头像
  ,id: 11111 //好友id
})
 
//自定义客服窗口
layim.config({
  brief: true //简约模式，不显示主面板
}).chat({
  name: '在线客服二' //名称
  ,type: 'friend' //聊天类型
  ,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1' //头像
  ,id: -2 //定义唯一的id方便你处理信息
});
layim.setChatMin(); //收缩聊天面板
</pre>
 
//自定义群聊（对于想搞一个临时性的房间，貌似是挺有意思的）
<pre class="layui-code">
layim.chat({
  name: 'LayIM畅聊'
  ,type: 'group' //群组类型
  ,avatar: 'http://tp2.sinaimg.cn/5488749285/50/5719808192/1'
  ,id: 10000000 //定义唯一的id方便你处理信息
  ,members: 123 //成员数，不好获取的话，可以设置为0
});
</pre>
      </pre>
      <p>该方法结合brief: true（简约模式），可以免去较为复杂的数据配置。轻量地建立一个聊天面板。拥有较大的平台实用性。可以预见的是，它应该会成为LayIM一个露脸率最高的存在。想象一下吧，对你而言是否如此？</p>
    </div>
    
    <div class="site-title">
      <a name="setChatMin"></a>
      <fieldset><legend>初始最小化聊天界面</legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法名：<a>layim.setChatMin()</a>，如果你在初始的状态下不想展开聊天面板（譬如<a>悬浮的在线客服</a>），那么该方法会派上用场，使用很简单，就不过多啰嗦了。</p>
      <pre class="layui-code">
layim.setChatMin();</pre>
    </div>
    
    <div class="site-title">
      <a name="setChatStatus"></a>
      <fieldset><legend>更新当前会话状态</legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法名：<a>layim.setChatStatus(str)</a>，可用于显示：对方输入状态、在线离线状态等，如：</p>
      <pre class="layui-code">
//每次窗口打开或切换，即更新对方的状态
layim.on('chatChange', function(res){
  var type = res.data.type;
  if(type === 'friend'){
    layim.setChatStatus('&lt;span style="color:#FF5722;"&gt;在线&lt;/span&gt;'); //模拟标注好友在线状态
  } else if(type === 'group'){
    //模拟系统消息
    layim.getMessage({
      system: true //系统消息
      ,id: 111111111
      ,type: "group"
      ,content: '贤心加入群聊'
    });
  }
});
      </pre>
    </div>
    
    <div class="site-title">
      <a name="add"></a>
      <fieldset><legend>弹出添加面板</legend></fieldset>
    </div>
    <div class="site-text">
      <p>
        方法名：<a>layim.add(data)</a>
        <br>执行该方法将弹出一个我们内置的添加面板，可以帮助你完成：申请添加好友、申请添加群。参数格式如下：
      </p>
      <pre class="layui-code">
layim.add({
  type: 'friend' //friend：申请加好友、group：申请加群
  ,username: 'xxx' //好友昵称，若申请加群，参数为：groupname
  ,avatar: 'a.jpg' //头像
  ,submit: function(group, remark, index){ //一般在此执行Ajax和WS，以通知对方
    console.log(group); //获取选择的好友分组ID，若为添加群，则不返回值
    console.log(remark); //获取附加信息
    layer.close(index); //关闭改面板
  }
});
      </pre>
    </div>
    
    <div class="site-title">
      <a name="setFriendGroup"></a>
      <fieldset><legend>好友分组面板</legend></fieldset>
    </div>
    <div class="site-text">
      <p>
        方法名：<a>layim.setFriendGroup(data)</a>
        <br>执行该方法将弹出一个好友分组面板，以完成将好友追加到主面板的操作：
      </p>
      <pre class="layui-code">
layim.setFriendGroup({
  type: 'friend'
  ,username: 'xxx' //好友昵称，若申请加群，参数为：groupname
  ,avatar: 'a.jpg' //头像
  ,group: layim.cache().friend //获取好友列表数据
  ,submit: function(group, index){
    //一般在此执行Ajax和WS，以通知对方已经同意申请
    //……
    
    //同意后，将好友追加到主面板
    layim.addList(data); //见下文
  }
});
      </pre>
    </div>
    
    
    <div class="site-title">
      <a name="addList"></a>
      <fieldset><legend>添加好友/群到主面板</legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法名：<a>layim.addList(options)</a>，当你的WebSocket监听到有好友或者群新增时，需让LayIM的主面板同步添加的信息，可用该方法。先看看例子：</p>
      <pre class="layui-code">
layim.on('ready', function(res){
  
  
  //监听添加列表的socket事件，假设你服务端emit的事件名为：addList
  socket.onmessage = function(res){
    if(res.emit === 'addList'){
      layim.addList(res.data); //如果是在iframe页，如LayIM设定的add面板，则为 parent.layui.layim.addList(data);
    }
  };
  
  //需要特别注意的是回调返回的<a>res</a>
  
  //如果添加的是好友，res的结构必须是这样的
<pre class="layui-code">
{
  type: 'friend' //列表类型，只支持friend和group两种
  ,avatar: "a.jpg" //好友头像
  ,username: '冲田杏梨' //好友昵称
  ,groupid: 2 //所在的分组id
  ,id: "1233333312121212" //好友id
  ,sign: "本人冲田杏梨将结束AV女优的工作" //好友签名
}
</pre>
//如果添加的是群组，res的结构必须是这样的
<pre class="layui-code">
{
  type: 'group' //列表类型，只支持friend和group两种
  ,avatar: "a.jpg" //群组头像
  ,groupname: 'Angular开发' //群组名称
  ,id: "12333333" //群组id
}
</pre>
});
      </pre>
    </div>
    
    <div class="site-title">
      <a name="removeList"></a>
      <fieldset><legend>从主面板移除好友/群</legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法名：<a>layim.removeList(options)</a>
      <br>当你的WebSocket监听到有好友或者群删除时，需让LayIM的主面板同步删除的信息，可用该方法。它的调用非常简单，只需要传两个key：</p>
      <pre class="layui-code">
layim.removeList({
  type: 'friend' //或者group
  ,id: 1238668 //好友或者群组ID
});
//如果是在iframe页，如LayIM设定的add面板，则为：
parent.layui.layim.removeList({
  type: 'friend' //或者group
  ,id: 1238668 //好友或者群组ID
});
      </pre>
    </div>
    
    <div class="site-title">
      <a name="setFriendStatus"></a>
      <fieldset><legend>实时更新好友列表离线状态</legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法名：<a>layim.setFriendStatus(id, type)</p>
      <pre class="layui-code">
layim.setFriendStatus(11111, 'online'); //设置指定好友在线，即头像取消置灰
layim.setFriendStatus(11111, 'offline'); //设置指定好友在线，即头像置灰
      </pre>
    </div>
    <div class="site-title">
      <a name="cache"></a>
      <fieldset><legend>获取cache数据</legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法名：<a>layim.cache()</a>，获取LayIM的cache信息，返回的信息结构和ready事件获得的信息一样，不同的是，改方法始终会获取到最新的cache。</p>
      <pre class="layui-code">
//输出的信息不妨在你的Chrome控制台看看（需在引有LayIM的页面中），在此就不做列举了
console.log(layim.cache()) </pre>
    </div>
    
    <div class="site-title">
      <a name="dellocal"></a>
      <fieldset><legend>删除本地数据</legend></fieldset>
    </div>
    <div class="site-text">
      <pre class="layui-code">
var cache =  layui.layim.cache();
var local = layui.data('layim')[cache.mine.id]; //获取当前用户本地数据
 
//这里以删除本地聊天记录为例
delete local.chatlog;
 
//向localStorage同步数据
layui.data('layim', {
  key: cache.mine.id
  ,value: local
});
      </pre>
    </div>
    
    <div class="site-title">
      <a name="copyright"></a>
      <fieldset><legend>关于版权</legend></fieldset>
    </div>
    <div class="site-text">
      <p>LayIM目前并非开源产品，因此如果你是通过官网捐赠渠道获得LayIM，你将成为LayIM的终身会员，并可以将LayIM应用在任意正规平台。如果你通过非捐赠渠道获得LayIM，我们并不会进行过多追究，<a>但是请勿对 LayIM 本身二次出售</a>。版权最终解释权为：layui.com 所有</p>
     
      <p></p>
    </div>
    
    <div class="layui-elem-quote">
  <p>Layui - 用心与你沟通</p>
</div>
    
  </div>
  </div>
  
<div class="layui-footer footer footer-doc">
  <div class="layui-main">
    <p>&copy; 2018 <a href="../layui.html">layui.com</a> MIT license</p>
    <p>
      <a href="http://fly.layui.com/case/2018/" target="_blank">案例</a>
      <a href="http://fly.layui.com/jie/3147/" target="_blank">众筹</a>
      <a href="mailto:xianxin@layui-inc.com">联系</a>
      <a href="https://github.com/sentsin/layui/" target="_blank" rel="nofollow">GitHub</a>
      <a href="https://gitee.com/sentsin/layui" target="_blank" rel="nofollow">码云</a>
      <a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
    </p>
    <p class="site-union">
      <a href="https://www.upyun.com?from=layui" target="_blank" rel="nofollow" upyun><img src="../imgs/upyun.png?t=1"></a>
      <span>提供 CDN 赞助</span>
    </p>
  </div>
</div>
<script async src="../js/adsbygoogle.js"></script>
<div class="site-tree-mobile layui-hide">
  <i class="layui-icon">&#xe602;</i>
</div>
<div class="site-mobile-shade"></div>
<script src="../layui/layui.js?t=1515376178738" charset="utf-8"></script>
<script>
window.global = {
  pageType: 'doc'
  ,preview: function(){
    var preview = document.getElementById('LAY_preview');
    return preview ? preview.innerHTML : '';
  }()
};
layui.config({
	 base: '../js/'
	 ,version: '1515376178709'
}).use('global');

layui.use("form",function(){
	var form = layui.form;
	
  //搜索组件
  form.on('select(component)', function(data){
    var value = data.value;
    location.href = value;
  });

  //切换版本
  form.on('select(tabVersion)', function(data){
    var value = data.value;
    if(value=="new")
	{
		location.href="doc.html";
	}else if(value=="v1")
	{
		location.href="v1.html";
	}
  });
  
});
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_30088308'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308' type='text/javascript'%3E%3C/script%3E"));</script>
</body>
</html>